<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1>验证码案例</h1>
<hr>

<form action="checkVerifyCode" method="get">
    <!--src为图片生成的Servlet,onclick实现函数变换img的src-->
    <img src="verifyCodeImg" alt="Loading" onclick="changeCode()" id="verifyCode" title="看不清楚，换一张" style="cursor: pointer;">
    <!--用户输入-->
    <input type="text" name="randomCode" id="userCode"><br><br>
    <input type="submit" value="提交验证"><br><br>
</form>

<script>
    function changeCode() {
        let codeImg=document.getElementById("verifyCode");
        //这里URL后追加随机数，使程序每次访问的都是不同的资源，防止浏览器缓存，即产生不同的验证码
        codeImg.src="verifyCodeImg?d="+Math.random();
    }
</script>
</body>
</html>
